<template>
  <a-modal
    v-model="visible"
    title="举办单位设置"
    destroyOnClose
    :maskClosable="false"
    centered
    :width="900"
    okText="保存"
    @ok="handleOk"
  >
    <div>
      <div class="disFlxAC">
        <div v-for="item in columns" :key="item.title" :style="'min-width:' + item.width + 'px;'" class="th">
          {{ item.title }}
        </div>
      </div>

      <Draggable
        v-model="tableData"
        group="sortTable"
        :animation="200"
        handle=".cum"
        chosenClass="chosen"
        :forceFallback="true"
        @start="onStart"
        @end="onEnd"
      >
        <div v-for="(item, index) in tableData" :key="index" class="disFlxAC tr">
          <div :style="'min-width:' + columns[0].width + 'px;'" class="td cum">
            <a-icon type="retweet" style="font-size: 20px;" />
          </div>
          <div :style="'min-width:' + columns[1].width + 'px;'" class="td">
            <div style="width:45px;overflow: hidden;">
              <UploadImg v-model="item.logo" :width="45" :height="45" :isShowTip="false" />
            </div>
          </div>
          <div :style="'min-width:' + columns[2].width + 'px;'" class="td">
            <a-input v-model="item.orgName" :maxLength="50" style="width:168px;" placeholder="请输入单位名称"></a-input>
          </div>
          <div :style="'min-width:' + columns[3].width + 'px;'" class="td">
            <a-select v-model="item.tagKey" style="width:168px;" placeholder="请选择单位标签">
              <a-select-option v-for="tag in tagOptions" :key="tag.tagKey" :value="tag.tagKey">
                {{ tag.showName }}
              </a-select-option>
            </a-select>
          </div>
          <div :style="'min-width:' + columns[4].width + 'px;'" class="td">
            <a-checkbox :checked="item.display === 1" @change="changeChecked(item)"></a-checkbox>
          </div>
          <div :style="'min-width:' + columns[5].width + 'px;'" class="td">
            <a-icon
              v-if="item.type === 2"
              type="delete"
              style="font-size: 20px;"
              class="deleteIcon"
              @click.stop="handleDelete(index)"
            />
            <a-tooltip v-else>
              <template slot="title">
                发布组织、合作协办组织不可删除！
              </template>
              <a-icon type="delete" style="font-size: 20px;" class="disabled" />
            </a-tooltip>
          </div>
        </div>
      </Draggable>

      <div class="disFlxCC _pt-15">
        <a-button type="primary" ghost icon="plus" @click="plusList">添加举办单位</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
import Draggable from 'vuedraggable'
import UploadImg from '@/components/UpFile/uploadImg.vue'
import { getActivityPartners, setActivityPartners, getPartnersTagList } from '@/api/activity/activity'
import { cloneDeep } from 'lodash-es'

export default {
  components: {
    Draggable,
    UploadImg
  },
  props: ['activityId'],
  data() {
    return {
      visible: false,
      tableData: [],
      columns: [
        {
          title: '拖动排序',
          width: 60
        },
        {
          title: '单位logo',
          width: 60
        },
        {
          title: '单位名称（必填）',
          width: 200
        },
        {
          title: '标签',
          width: 200
        },
        {
          title: '显示',
          width: 60
        },
        {
          title: '操作',
          width: 60
        }
      ],

      tagOptions: []
    }
  },
  created() {
    getPartnersTagList().then(res => {
      this.tagOptions = res.data
    })
  },
  methods: {
    onStart(event) {
      event.item.style.opacity = '0.1'
    },
    onEnd(event) {
      event.item.style.opacity = '1'
      console.log(JSON.parse(JSON.stringify(this.tableData)))
    },
    openModel() {
      this.getList()
      this.visible = true
    },
    getList() {
      getActivityPartners(this.activityId).then(res => {
        this.tableData = res.data
      })
    },
    plusList() {
      this.tableData.push({
        orgName: '',
        logo: '',
        tagName: '',
        tagKey: 'NONE',
        type: 2,
        display: 0
      })
    },
    handleDelete(index) {
      this.tableData.splice(index, 1)
    },
    changeChecked(item) {
      item.display = item.display === 1 ? 0 : 1
    },
    handleOk() {
      let params = {
        activityId: this.activityId,
        partners: cloneDeep(this.tableData)
      }
      for (let i = 0; i < params.partners.length; i++) {
        if (!params.partners[i].orgName) {
          this.$message.error('请填写单位名称')
          return
        }

        if (!params.partners[i].tagKey) {
          params.partners[i].tagKey = 'NONE'
        }
        const item = this.tagOptions.find(item => item.tagKey === params.partners[i].tagKey)
        params.partners[i].tagName = item.tagName
      }
      setActivityPartners(params).then(res => {
        this.$message.success('保存成功')
        this.visible = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.th {
  flex: 1;
  text-align: center;
  line-height: 40px;
  background-color: #f2f3f5;
  color: #1d2129;
}
.tr {
  height: 59px;
  border-bottom: solid 1px #e5e6eb;
  /deep/ .ant-upload.ant-upload-select-picture-card,
  /deep/ .ant-upload-list-picture-card .ant-upload-list-item,
  /deep/ .ant-upload-list-picture-card-container {
    margin: 2px 0px 0px 0px !important;
  }
}
.td {
  flex: 1;
  padding: 2px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cum {
  cursor: move;
}
.chosen {
  background-color: #f7f8fa !important;
}
.deleteIcon {
  color: #f53f3f;
}
.disabled {
  color: #c9cdd4;
}
</style>
